资讯详情
如何从视觉角度提升夜间阅读体验，如何借助组件库建立色彩映像，高效推动设计落地，本文一一揭晓
关键字
深色主题、组件映射、夜间模式
深色主题占用更少的屏幕亮度，有效缓解了手机屏幕对眼睛的刺激，另外还可以降低电池损耗，强化用户的操控感。从 Yosemite 到 Mojave，苹果系统不断延展深色主题的覆盖范围，用户开启深色主题后可以一并开启系统内所有有深色主题的应用。Google 旗下的 Youtube 等产品也相继推出深色主题，今年11月的安卓开发峰会上，Google 再次肯定了深色主题的开发价值。
起点的夜间阅读体验并不完善，除了阅读页背景，没有覆盖全整条阅读路径，阅读过程中如果发表评论，或者查看目录，从黑色到白色，明显的亮度变化造成强烈的视觉刺激。起点曾使用降低屏幕亮度和过滤蓝光的方法，改善夜间阅读的舒适度，但是「一刀切」的做法有些粗暴，整体界面的辨识度变得不可控，有些页面对比度过强，有些页面图底本身就对比度弱，加了蒙版且去掉蓝光之后，页面的信息层级有些模糊不清。
新红袖读书 [1] 的夜间模式的做法是非常彻底的，从底层代码上解决了全局换色的问题，且优化了响应速度，对起点夜间模式改造有很大的借鉴意义。
通过观察一天内不同时间段的用户活跃分布，我们发现晚上7点以后用户活跃量不断攀升，22:00 – 23:00 达到当天最大值。起点 iOS 和 Android 用户每日行为曲线基本类似，从晚上7点到凌晨，用户活跃量逐渐增加，在该时间段内，用户处于弱光或即将处于弱光环境下。
起点每日用户活跃分布
我们希望用最小成本提升用户夜间阅读体验。作为一款阅读产品，核心路径是阅读，通过用户访谈和数据埋点，剔除掉部分过路页和到达率较低的页面，锁定核心阅读路径为：目录、段评、发表/回复评论、订阅、投票和打赏，以及追更用户每日都会到达的阅读末页。
核心阅读路径
权衡新老用户习惯和开发效率，我们决定从阅读路径向外辐射，逐步完成全局夜间模式的目标。
① 降低屏幕亮度
屏幕发出的短波蓝光危害健康 [2] ，过多的蓝光刺激使得感光细胞产生光化学扰动，甚至引起其畸变造成视网膜损伤。给白色界面覆盖一层黄色或黑色蒙版并不会有很大改善，事实上，只要屏幕发光，蓝光就一直存在，真正的降低蓝光，是将界面整体调整为墨水屏的效果，减少大面积的白色界面，才能降低对眼睛的刺激。
② 减少冷色面积
色温也影响视觉感受，当屏幕色温低于 3000K [3] 时，屏幕会发出暖光，感觉会比较舒适。很多手机系统都有调节色温的能力，比如 iOS 夜览，在特定时间段，屏幕颜色将自动调节为较暖的色调。另外，以 f.lux 为代表的第三方护眼软件也可以灵活调节色温。
上述改变屏幕色温的方法，一定程度上提升了视觉的舒适度，但是全局转黄会导致色彩失真，解决方案不算完美。白天和夜间的产品界面需要区别对待，应该在降低屏幕亮度的基础上，保留原有的色彩面貌。
夜间模式是设计侧驱动的优化项，我们并不希望给设计和开发团队带来额外的工作负担。起点读书改版 [4] 之后，设计师和开发同学一起开发了组件库 [5] ，夜间模式可以以组件为基础，围绕夜间阅读的核心路径，拆分出一套独立的「夜间模式组件」，再借助于 Libraries，快速调整新界面。开发同学可以组件为宗，梳理特定路径下的组件样式，按照色彩映射调整并调用，最终完成夜间模式的开发。
起点的主色和辅助色均在蓝色区间，直接使用在深色背景上，整体页面偏冷，颜色显得较为尖锐。使用 Contrast Ratio [6] 发现，主色与深色背景的对比度仅为 1.98，不符合 WCAG 标准。既然白色 UI 不能直接反色用到深色主题上，那么应该如何定义夜间模式色板呢？我们研究了 iOS Design 和 Material Design 的深色主题设计，发现在深色主题下的色彩有一定的梯度规律。
Apple 和 Google 开发的系统应用
夜间模式色彩库需要遵循一定的规则，且应该与白色UI的基础色形成映射。仔细观察 Sketch 颜色面板，不难发现这其实是一个被展开的 Hexcone Model [7] 色彩模型，横轴是饱和度，纵轴是明度，色彩平面的中的任何一个颜色，向左横向滑动色圈至纵轴，均为该色去彩度之后的明度，可以通过此种方法将白色UI的基础颜色转换为灰色。
Sketch 颜色拾取器分析
以文字为例，将白色UI的主色和辅助色转换为夜间模式下主色和辅助色。
基础色彩映射
同理，可提取一组背景色。
夜间模式映射规范和颜色库
使用对比度测试工具检测出当前对比度已经提升至 9.42，处于合理区间，符合 WCAG 标准。对于界面上一些特定的彩色，他们是信息层级的一部分，去除彩度后会削弱视觉表现。
段评两种设计方案比较
以段评信息模块的夜间模式为例，方案一完全去彩色，削弱了需要强调的内容，如帖子荣誉标签和操作反馈。对比方案一，方案二页面整体处于一个亮度，红色降低饱和度之后，依然保留了原有的荣誉标签，点赞反馈也比较明确。
起点读书采用的是多为 SVG / PDF 格式的切图。单色图标是使用最多的样式，黑色的单色图标按照色彩映射规范可以直接转为灰色。多色图标需要分类处理，全彩色图标将其视为一个整体，降低其透明度；对于黑色搭配彩色的图标，需要将图形拆解后，各元素分别做夜间模式色彩映射。
单色与多色图标的映射
起点全局图标切换为 SVG / PDF 之后，定位和调整都变得简单，不但批量修改方便，也减少了安装包体积，后期维护只需同步变量即可，非常高效。
需要注意的是，图标转为 SVG / PDF 之后，提高了对设计师绘制图形的要求。设计师的源文件应保持整洁，复杂图形执行完布尔运算之后应该仔细检查是否破损，图形交插点和填充方式是否准确，否则会导致编译出错。
夜间模式下按钮需要继承白色UI的默认态、点击态、选中态和禁用态。以网文订阅半弹层为例，按照夜间模式色彩映射规范，拆解白色UI组件的文字、背景、选中框、渐变等元素，一一映射到深色背景上。
订阅弹层页面和部分组件
对于页面中的其他元素，如书封、广告位、用户的头像和上传的社区向内容等UI之外的图片，整体增加50%蒙版，以保持和其他深色UI同等亮度。
任何一处的设计提升都不是凭空想象。夜间使用体验不佳最早由我们的交互设计师 @剑剑 提出的，阅读页发表或回复段评都不得不唤起一个白色界面，由黑到白，强烈的亮度反差非常刺眼。这个问题在新段评第二个版本得到解决，在之后的几个版本中，我们把夜间模式做的更成体系。
夜间模式的设计只是起点不断更新和完善过程中的一件小事，我们会继续努力。如果你对本文有任何疑问或建议，欢迎留言与笔者讨论，如果你在使用起点时有任何问题或不便，可以在起点账户页左上角「设置 —— 吐个槽」告诉我们。
最后，感谢精诚协作的小伙伴，设计师 亚宁、燕雯、雪松、剑剑；客户端开发周林、石健。
相关阅读
02 Blue light excited retinal intercepts cellular signaling. Scientific Report , 2018
03 Color temperature , Wiki
05 如何使用 Sketch Libraries 管理组件：视觉工作流程优化
06 Web Content Accessibility Guidelines (WCAG) 2.1
07 Hue, Saturation, and Value Color Model , HyperGraph , 1999
